<div class="join-affiliate">
  <div class="{% unless section.settings.full_width %}page-width{% endunless %}">
      {%- if section.settings.heading != blank -%}
       <div class="affiliate-title">
          <div class="title">
             <span> {{ section.settings.heading | escape }}</span>
           </div> 
       </div>
     {%- endif -%}
     <div class="swiper-father">
      <div class="swiper affiliateSwiper">
          <div class="swiper-wrapper">
           {%- for block in section.blocks -%}
              <div class="swiper-slide" {{ block.shopify_attributes }}>
                <div class="affiliateSwiper-list">
                  {% if block.settings.icon !=blank %}
                     {{ block.settings.icon }}
                  {% endif %}
                  <div class="reasons-list">
                   {%- if block.settings.title != blank -%}
                    <p>{{ block.settings.title }}</p>
                   {%- endif -%}
                 {%- if block.settings.text != blank -%}
                   <div class="rte">
                       {{ block.settings.text }}
                   </div>
                 {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endfor -%}
          </div>
          <!-- <div class="swiper-pagination aff"></div> -->
      </div>
     </div>
  </div>
</div>


<script>
  var swiper = new Swiper(".affiliateSwiper", {
    speed: 600,
    slidesPerView:1,
    spaceBetween:0,
    observer:true,
    observeParents:true,
    spaceBetween: 36,
    pagination: {
      el: ".swiper-pagination.aff",
      clickable: true,
    },
    breakpoints: {
      320: {
        slidesPerView:1,
        spaceBetween: 26,
        loop:true,
      },
      375: {
        slidesPerView: 1.2,
        spaceBetween: 26,
        loop:true,
      },
      640: {
        slidesPerView:1.2,
        spaceBetween: 26,
        loop:true,
      },
      750: {
        slidesPerView: 2,
        spaceBetween:30,
      },
      768: {
        slidesPerView: 2,
        spaceBetween:30,
        grid: {
         rows: 2,
        },
      },
      900: {
        slidesPerView: 3,
        spaceBetween:36,
        grid: {
         rows: 2,
        },
      },
      1440: {
        slidesPerView: 3,
        spaceBetween:36,
        grid: {
         rows: 2,
        },
      },
    }
  });
</script>

{% schema %}
{
"name": "Join affiliate",
"tag": "section",
"class": "spaced-section spaced-section--full-width",
"settings": [
{
  "type": "text",
  "id": "heading",
  "default": "Talk about your brand",
  "label": "Heading"
},
{
  "type": "checkbox",
  "id": "full_width",
  "default": false,
  "label": "t:sections.rich-text.settings.full_width.label"
}
],
"blocks": [
{
  "type": "column",
  "name": "column",
  "settings": [
  {
    "type": "html",
    "id": "icon",
    "label": "Icon"
  },
   {
      "type": "text",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text"
    }
  ]
}
],
"presets": [
  {
    "name": "join affiliate"
  }
]
}
{% endschema %}
